<template>
  <div class="person">
    <div class="top-box">
      <div class="tab">
        <div class="info">
          <section class="login" @click="onInfo">
            <div class="avatar">
              <img class="hea" v-if="user_id" :src="userInfo.avatar || headerImg" />
              <img class="hea" v-else src="~@/assets/images/avatar.png" />
              <img
                class="vip-logo"
                v-if="user_id&&userInfo.is_vip"
                src="~@/assets/images/皇冠-2@2x.png"
              />
              <img
                class="vip-logo"
                v-if="user_id&&!userInfo.is_vip"
                src="~@/assets/images/皇冠-2 拷贝@2x.png"
              />
            </div>
            <div class="extra">
              <p class="name">
                <span v-if="user_id">{{userInfo.nickname}}</span>
                <span v-else>登录/注册</span>
              </p>
              <p class="edit" v-if="user_id">
                <!-- <span>{{userInfo.is_vip ? '续费会员' : '开通会员'}}></span> -->
              </p>
            </div>
          </section>
          <!-- <section v-else class="no-login" @click="onLogin">
          <div class="avatar">
            <img src="~@/assets/images/avatar.png" />
          </div>
          <p>登录/注册</p>
          </section> -->
        </div>
        <div class="mine">
          <ul>
            <li
              v-for="(item, index) in mineList"
              :key="index"
              :class="item.style"
              @click="onMineItem(item)"
            >
              <p class="count">{{item.count}}</p>
              <p class="name">{{item.name}}</p>
              <p class="note">{{item.note}}</p>
            </li>
          </ul>
        </div>
        <div class="to-set" @click="turnPage('oto')">
          <!-- <img src="~@/assets/theme-img/icon_person_edit.png" /> -->
          <span>去约课</span>
        </div>
        <!-- <button class="to-set" type="button" @click="turnPage('Options')"></button> -->
      </div>
    </div>
    <div class="to-share">
      <div class="box" @click="showPopup=true">
        <img src="~@/assets/images/icon_person_share.png" />
        <div>
          <p class="big">邀请好友注册APP，享多重好礼</p>
          <p class="sub">限时特惠，多邀多得</p>
        </div>
      </div>
    </div>
    <ul class="menu-box">
      <li>
        <p class="title">课程相关</p>
        <div class="item-box">
          <div class="item" @click="turnPage('Concern')">
            <img class="icon-teacher" src="~@/assets/theme-img/icon_person_teacher.png" />
            <p>关注的老师</p>
          </div>
          <div class="item" @click="turnPage('Collect')">
            <img class="icon-collect" src="~@/assets/theme-img/icon_person_collect.png" />
            <p>我的收藏</p>
          </div>
        </div>
      </li>
      <li>
        <p class="title">订单相关</p>
        <div class="item-box">
          <div class="item" @click="turnPage('Order',{order_type: 2})">
            <img class="icon-order" src="~@/assets/theme-img/icon_person_order.png" />
            <p>课程订单</p>
          </div>
          <div class="item" @click="turnPage('Order',{order_type: 3})">
            <img class="icon-order" src="~@/assets/theme-img/icon_person_order.png" />
            <p>会员订单</p>
          </div>
          <div class="item" @click="turnPage('Order',{order_type: 1})">
            <img class="icon-order" src="~@/assets/theme-img/icon_person_order.png" />
            <p>约课订单</p>
          </div>
        </div>
      </li>
      <li>
        <p class="title">我的账户</p>
        <div class="item-box">
          <div class="item" @click="turnPage('Coupon')">
            <img class="icon-coupon" src="~@/assets/theme-img/icon_person_coupon.png" />
            <p>优惠券</p>
            <span></span>
          </div>
          <div class="item" @click="turnPage('Card')">
            <img class="icon-card" src="~@/assets/theme-img/icon_person_card.png" />
            <p>学习卡</p>
          </div>
          <div class="item" @click="turnPage('Vip')">
            <img class="icon-vip" src="~@/assets/theme-img/icon_person_vip.png" />
            <p>会员</p>
          </div>
        </div>
      </li>
      <li>
        <p class="title">自助服务</p>
        <div class="item-box">
          <div @click="turnPage('Message')" :class="newMessage==true?'item has_message':'item'">
            <img class="icon-news" src="~@/assets/theme-img/icon_person_news.png" />
            <p>我的消息</p>
            <span></span>
          </div>
          <div class="item" @click="turnPage('Feedback')">
            <img class="icon-mail" src="~@/assets/theme-img/icon_person_mail.png" />
            <p>意见反馈</p>
          </div>
          <div class="item" @click="openCustom">
            <img class="icon-custom" src="~@/assets/theme-img/icon_person_custom.png" />
            <p>在线客服</p>
          </div>
          <div class="item" @click="turnPage('Options')">
            <img class="icon-custom" src="~@/assets/theme-img/icon_person_setting.png" />
            <p>设置</p>
          </div>
          <!-- <router-link class="item" :to="{ name: '' }">
          <img class="icon-about" src="~@/assets/theme-img/icon_person_about.png" />
          <p>关于我们</p>
          </router-link>-->
        </div>
      </li>
    </ul>
    <!-- <div class="bottom-box">
    <ul v-for="(menuItem, index) in menusList" :key="index">
      <li v-for="(item, index) in menuItem" :key="index" @click="onMenuItem(item)" :class="item.style || ''">{{item.name}}</li>
    </ul>
    </div>-->
    <!-- <van-popup v-model="showPopup">
      <div class="share-box">
        <img class="share-img" :src="shareImg" />
        <div class="finger">
          <img src="~@/assets/images/icon_home_finger.png" />
          <p>长按保存到相册</p>
        </div>
      </div>
    </van-popup>-->
  </div>
</template>

<script>
import {userInfo,Mag,Center} from "../request/api.js"
export default {
  name: "my",
  data() {
    return {
      user_id: JSON.parse(localStorage.getItem("user_id")) || "",
      userInfo: {},
      headerImg: require("@/assets/images/user_Headportrait.png"),
      newMessage: false,
      mineList: [
        {
          count: 0,
          name: "我的特色课",
          note: "已购特色课程的学习",
          style: "my-study",
          url: "MyStudy"
        },
        {
          count: 0,
          name: "一对一辅导",
          note: "我的一对一老师辅导",
          style: "my-plan",
          url: "yue"
        },
        {
          count: 0,
          name: "剩余学习币",
          note: "查看剩余学习币",
          style: "my-period",
          url: "MyCurrency"
        }
      ],
      showPopup: false,
      shareImg: "",
      is_weixin: false
    };
  },
  created() {
    this.turnPage();
    this.requestUserInfo()
  },
  methods: {
    turnPage(name, query) {
      if (!this.user_id) {
        // 未登录 统一推到验证码登录页面
        this.$router.push({
          name: "Login"
        });
        return;
      }

      this.$router.push({
        name,
        query
      });
    },
    onLogin() {
      this.turnPage("Login");
    },
    onMineItem(item) {
      if (!item.url) return;
      this.turnPage(item.url);
    },
    onInfo() {
      this.turnPage("Info");
    },
    onVip() {
      this.turnPage("Vip");
    },
    onMenuItem(item) {
      this.turnPage(item.url, item.query);
    },
    openCustom() {
      _MEIQIA("showPanel");
    },
    // rquest
    requestUserInfo() {
      userInfo().then(data => {
        this.userInfo = data.data;
        console.log( this.userInfo)
        this.requestMessage();
        this.requestCount();
      });
    },
    requestMessage() {
      // Mag().then(data => {
      //   console.log(data)
      //   for (const i of data) {
      //     if (i.is_read == 0) {
      //       this.newMessage = true;
      //       break;
      //     }
      //   }
      // });
    },
    requestCount() {
      Center().then(data => {
        console.log(data)
        this.mineList[0].count = data.data.courses;
        this.mineList[1].count = data.data.oto;
        this.mineList[2].count = (data.data.integral / 100).toFixed(2);
      });
    },
    requestShareImg() {
      this.$http.post("/api/app/public/share").then(data => {
        this.shareImg = data.path;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.person {
  overflow: hidden;
  padding-bottom: 150px;
  min-height: 100vh;
  background: #f0f2f5;
  box-sizing: border-box;
}
.top-box {
  height: 220px;
  background: url("~@/assets/theme-img/user_bg.png") no-repeat top center;
  background-size: 100%;
  background-color: #fff;
  position: relative;
  //   padding: 0 30px;
  .tab {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    background-color: #fff;
    box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    height: 180px;
    .info {
      overflow: hidden; //触发BFC
      .login {
        overflow: hidden; //触发BFC
        // margin: 10px 0 0 10px;
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 80px;
        .avatar {
          margin: 0 25px 0 0;
          position: relative;
          width: 20%;
          height: 20px;
          .hea {
            width: 48px;
            height: 48px;
          }
          .vip-logo {
            position: absolute;
            right: -13px;
            top: 0px;
            width: 20px;
            height: 20px;
          }
        }
        .extra {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .name {
            font-size: 15px;
            color: #333;
          }
          .edit {
            width: 20px;
            height: 21px;
            margin-left: 20px;
            background: url("~@/assets/images/修改@2x.png") center no-repeat;
            background-size: 20px 21px;
          }
        }
        .no-login {
          margin-top: 106px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          p {
            font-size: 34px;
            color: #fff;
            margin-top: 36px;
          }
        }
        .avatar {
          width: 50px;
          height: 50px;
          background-color: #bdcdf1;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 10px;
          img {
            width: 118px;
            height: 118px;
            border-radius: 50%;
          }
        }
      }
    }
  }
}
.to-share {
    width: 100%;
    // padding: 30px 30px 0;
    background-color: #fff;
    box-sizing: border-box;
    .box {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 95%;
      height: 44px;
      margin: 0 auto;
      background: linear-gradient(
        -90deg,
        rgba(242, 153, 90, 1),
        rgba(235, 97, 0, 1)
      );
      border-radius: 44px;
      img {
        display: block;
        width: 20px;
        height: 16px;
        margin: 0 15px 0 18px;
      }
      .big {
        font-size: 13px;
        color: #fff;
        line-height: 24px;
      }
      .sub {
        // margin-top: 10px;
        font-size: 15px;
        color: #fff;
        line-height: 20px;
      }
      &:after {
        content: "";
        display: block;
        border-top: 3px solid #fff;
        border-right: 3px solid #fff;
        width: 10px;
        height: 10px;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%) rotate(45deg);
      }
    }
  }
  .menu-box {
    width: 100%;
    padding: 0 15px;
    background-color: #fff;
    box-sizing: border-box;
    li {
      padding: 20px 0;
      border-bottom: 1px solid #eeeeee;
      .title {
        font-family: PingFangSC-Medium;
        font-size: 20px;
        color: #333;
        line-height: 22px;
      }
      .item-box {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        .item {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          flex-direction: column;
          width: 25%;
          height: 60px;
          text-align: center;
          img {
            display: inline-block;
          }
          p {
            // margin-top: 20px;
            font-size: 13px;
            color: #666;
            line-height: 24px;
          }
          .icon-teacher {
            width: 18px;
            height: 20px;
          }
          .icon-collect {
            width: 18px;
            height: 20px;
          }
          .icon-order {
            width: 18px;
            height: 20px;
          }
          .icon-coupon {
             width: 18px;
            height: 20px;
          }
          .icon-card {
             width: 18px;
            height: 20px;
          }
          .icon-vip {
            width: 18px;
            height: 20px;
          }
          .icon-news {
             width: 18px;
            height: 20px;
          }
          .icon-mail {
             width: 18px;
            height: 20px;
          }
          .icon-custom {
            width: 18px;
            height: 20px;
          }
          .icon-about {
            width: 18px;
            height: 20px;
          }
        }
      }
    }
    li:last-child {
      border: none;
    }
  }
  .bottom-box {
    ul {
      background-color: #fff;
      margin: 30px 0;
      padding: 10px 30px;
      li {
        height: 110px;
        line-height: 110px;
        position: relative;
        font-size: 28px;
        color: #595959;
        &:before {
          content: "";
          display: block;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%) rotate(45deg);
          width: 20px;
          height: 20px;
          border-top: 1px solid #b7b7b7;
          border-right: 1px solid #b7b7b7;
        }
        border-bottom: 1px solid #f5f5f5;
        &:last-child {
          border-bottom: none;
        }
      }
      li.has-message:after {
        content: "";
        display: block;
        position: absolute;
        top: 50%;
        left: 120px;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: red;
      }
    }
  }
  .share-box {
    // position: fixed;
    // top: 50%;
    // left: 50%;
    width: 670px;
    // transform: translate(-50%,-50%);
    .share-img {
      display: block;
      width: 100%;
    }
    .finger {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding-top: 40px;
      img {
        width: 42px;
        height: 44px;
        margin-right: 20px;
      }
      p {
        font-family: PingFangSC-Medium;
        font-size: 30px;
        color: #fff;
      }
    }
  }
  .van-popup--center {
    background-color: transparent;
  }
  .has_message {
    position: relative;
  }
  .has_message span {
    left: 50;
    margin-left: 20px;
    top: 20px;
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: red;
  }
.mine {
        ul {
          width: 100%;
          display: flex;
          li {
            width: 33%;
            // height: 20px;
            // margin-top: 30px;
            // position: relative;
            text-align: center;
            .count {
              font-size: 20px;
              line-height: 30px;
              color: #eb6100;
            }
            .name {
              font-size: 15px;
              color: #595959;
              margin-bottom: 12px;
            }
            .note {
              font-size: 10px;
              color: #b7b7b7;
            }
            &::after {
              content: "";
              display: block;
              width: 1px;
              height: 110px;
              background-color: #f5f5f5;
              position: absolute;
              top: 50%;
              right: 0;
              transform: translateY(-50%);
            }
            &:last-child::after {
              display: none;
            }
          }
        }

        .my-study > .count {
          color: #eb6100;
        }
        .my-plan > .count {
          color: #eb6100;
        }
        .my-period > .count {
          color: #eb6100;
        }
      }
  .to-set {
        position: absolute;
        top: 23px;
        right: 0;
        width: 55px;
        height: 25px;
        line-height: 50%;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        background-color: #eb6100;
        text-align: center;
        vertical-align: middle;
        img {
          width: 21px;
          display: inline-block;
          vertical-align: middle;
        }
        span {
          display: inline-block;
          // width:70px;
          height: 50px;
          line-height: 25px;
          font-size: 13px;
          vertical-align: middle;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
        }
      }
</style>